<template>
	<view>
		<view class="cu-modal" :class="modalName=='modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar justify-end">
					<view class="content">互动服务器</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-sm">
					<view class="cu-form-group">
						<view class="title">互动服务器IP</view>
						<input v-model="localIp" type="text" class="chat-input-style" placeholder="请输入互动服务器IP..." confirm-type="send" style="width: 360rpx;" />
					</view>
					 <view class="margin-top-sm">
						<button hover="true" hover-class="btnhover" @tap="prev" class="chat-input-send-button-style margin-right-sm"
						 style="display: inline-block; width: 45%;">播放上一个素材</button>
						<button hover="true" hover-class="btnhover" @tap="next" class="chat-input-send-button-style" style="display: inline-block; width: 45%;">播放下一个素材</button>
					</view>
					<!-- <view class="margin-top-sm">
						<button hover="true" hover-class="btnhover" @tap="quit" class="chat-input-send-button-style margin-right-sm"
						 style="display: inline-block; width: 30%;">退出软件</button>
						<button hover="true" hover-class="btnhover" @tap="ExitReboot" class="chat-input-send-button-style margin-right-sm"
						 style="display: inline-block; width: 30%;">退出并重启</button>
						<button hover="true" hover-class="btnhover" @tap="ExitShutdown" class="chat-input-send-button-style" style="display: inline-block; width: 30%;">退出并关机</button>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import http from '../../utils/http.js'
	import websocket from '../../utils/websocket.js';
	import utils from '../../utils/util.js';
	
	export default {
		props:{
			hudongIp:{
				type:String
			}
		},
		data() {
			return {
				localIp: '',
				modalName: ''
			}
		},
		watch:{
			modalName(type){
				// console.log(this.localIp,'localIp')
				this.localIp = this.hudongIp;
			},
			hudongIp(val){
				// console.log(val,'hudongIp')
				this.localIp = val;
				// console.log(this.localIP,'localIP')
			}
		},
		created() {
		},
		mounted() {

		},
		methods: {
			prev() { //上一首
				this.sendMsg(0);
			},
			next() { //下一首
				this.sendMsg(1);
			},
			quit() { //退出软件
				this.sendMsg(2);
			},
			ExitReboot() { //退出并重启
				this.sendMsg(3);
			},
			ExitShutdown() { //退出并关机
				this.sendMsg(4);
			},
			sendMsg(type) { //发送通信
				if (this.localIp == '') {
					uni.showToast({
						title: '请输入互动服务器IP地址',
						icon: 'none'
					})
					return false;
				}

				if (this.localIp && !(
						/((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/).test(this.localIp)) {
					uni.showToast({
						title: 'IP地址不规范～',
						icon: 'none'
					})
					return false;
				}

				let dataMsg = {
					"command": 'hudong',
					"type": type,
					"ip": this.localIp
				}
				console.log(dataMsg, '发送的数据')
				// websocket.send(JSON.stringify(dataMsg))
				
				uni.setStorageSync('hudongIp',this.localIp)
				http.httpRequest(dataMsg).then(res => {
					// console.log(res,'http获取到的数据');
					if(res.data.command == 'hudong' && res.data.result == 'SUCCESS'){
						uni.showToast({
							title:'操作成功~',
							icon:'none'
						})
					}else if(res.data.result == 'FAILED'){
						uni.showToast({
							title:'操作失败~',
							icon:'none'
						})
					}
				}, error => {
					console.log(error);
				})
			},
			hideModal() {
				this.modalName = '';
				uni.setStorageSync('hudongIp',this.localIp)
			}
		}
	}
</script>

<style scoped>
	@import "../../colorui/main.css";
	@import "../../colorui/icon.css";

	.cu-form-group,
	.cu-dialog {
		color: #fff;
		background-color: #535178;
	}

	.cu-bar {
		border-bottom: 1px solid #ccc;
	}

	.text-style {
		text-align: left;
		text-indent: 30px;
	}

	.chat-input-style {
		border-radius: 20rpx;
		border: 1rpx solid #fff;
		margin-top: 14rpx;
		margin-bottom: 13rpx;
		padding: 10rpx 20rpx;
		min-height: 45rpx;
		height: 70rpx;
		color: #ffffff !important;
	}

	.chat-input-send-button-style {
		width: 170rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 10rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius: 15rpx;
		border: 1rpx solid #fff;
		color: #fff;
		background-color: transparent;
	}
</style>
